<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Products</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- font-awesome icons -->
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- //font-awesome icons -->
    <!-- js -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!-- //js -->
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic'
          rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
          rel='stylesheet' type='text/css'>
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
</head>

<body>
<!-- header -->
<div class="agileits_header">
    <div class="w3l_offers">
        <a href="list.html">Today's special Offers !</a>
    </div>
    <div class="w3l_search">
        <form action="#" method="post">
            <input type="text" name="Product" value="Search a product..." onfocus="this.value = '';"
                   onblur="if (this.value == '') {this.value = 'Search a product...';}" required="">
            <input type="submit" value=" ">
        </form>
    </div>
    <div class="product_list_header">
        <div style="cursor: pointer;">
            <span class="glyphicon glyphicon-shopping-cart my-cart-icon" href="shopping/cart.html"><i
                    class="badge badge-notify my-cart-badge"></i></span>
        </div>
    </div>
    <div class="w3l_header_right">
        <ul>
            <li class="dropdown profile_details_drop">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user" aria-hidden="true"></i><span
                        class="caret"></span></a>
                <div class="mega-dropdown-menu">
                    <div class="w3ls_vegetables">
                        <ul class="dropdown-menu drp-mnu">
                            <li><a href="login.html">Login</a></li>
                            <li><a href="login.html">Sign Up</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="w3l_header_right1">
        <h2><a href="mail.html">Contact Us</a></h2>
    </div>
    <div class="clearfix"></div>
</div>
<!-- script-for sticky-nav -->
<script>
    $(document).ready(function () {
        var navoffeset = $(".agileits_header").offset().top;
        $(window).scroll(function () {
            var scrollpos = $(window).scrollTop();
            if (scrollpos >= navoffeset) {
                $(".agileits_header").addClass("fixed");
            } else {
                $(".agileits_header").removeClass("fixed");
            }
        });

    });
</script>
<!-- //script-for sticky-nav -->
<div class="logo_products">
    <div class="container">
        <div class="w3ls_logo_products_left">
            <h1><a href="index.html"><span>Grocery</span> Store</a></h1>
        </div>
        <div class="w3ls_logo_products_left1">
            <ul class="special_items">
                <li><a href="events.html">Events</a><i>/</i></li>
                <li><a href="about.html">About Us</a><i>/</i></li>
                <li><a href="list.html">Best Deals</a><i>/</i></li>
                <li><a href="services.html">Services</a></li>
            </ul>
        </div>
        <div class="w3ls_logo_products_left1">
            <ul class="phone_email">
                <li><i class="fa fa-phone" aria-hidden="true"></i>(+0123) 234 567</li>
                <li><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="mailto:store@grocery.com">store@grocery.com</a>
                </li>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //header -->
<!-- products-breadcrumb -->
<div class="products-breadcrumb">
    <div class="container">
        <ul>
            <li><i class="fa fa-home" aria-hidden="true"></i><a href="index.html">Home</a><span>|</span></li>
            <li>Branded Foods</li>
        </ul>
    </div>
</div>
<!-- //products-breadcrumb -->
<!-- banner -->
<div class="banner">
    <div class="w3l_banner_nav_left">
        <nav class="navbar nav_bottom">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header nav_2">
                <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse"
                        data-target="#bs-megadropdown-tabs">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
                <ul class="nav navbar-nav nav_1">
                    <li><a href="list.html">Branded Foods</a></li>
                    <li><a href="household.html">Households</a></li>


                    <li class="dropdown mega-dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Veggies & Fruits<span class="caret"></span></a>
                            <div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
                                <div class="w3ls_vegetables">
                                    <ul>
                                        <li><a href="vegetables.html">Vegetables</a></li>
                                        <li><a href="vegetables.html">Fruits</a></li>
                                    </ul>
                                </div>
                            </div>
                    </li>


                    <li><a href="kitchen.html">Kitchen</a></li>
                    <li><a href="short-codes.html">Short Codes</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Beverages<span class="caret"></span></a>
                        <div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
                            <div class="w3ls_vegetables">
                                <ul>
                                    <li><a href="drinks.html">Soft Drinks</a></li>
                                    <li><a href="drinks.html">Juices</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="pet.html">Pet Food</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Frozen Foods<span
                                class="caret"></span></a>
                        <div class="dropdown-menu mega-dropdown-menu w3ls_vegetables_menu">
                            <div class="w3ls_vegetables">
                                <ul>
                                    <li><a href="frozen.html">Frozen Snacks</a></li>
                                    <li><a href="frozen.html">Frozen Nonveg</a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="bread.html">Bread & Bakery</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </div>
    <div class="w3l_banner_nav_right">
        <div class="w3l_banner_nav_right_banner3">
            <h3>Best Deals For New Products<span class="blink_me"></span></h3>
        </div>
        <div class="w3l_banner_nav_right_banner3_btm">
            <div class="col-md-4 w3l_banner_nav_right_banner3_btml">
                <div class="view view-tenth">
                    <img src="images/13.jpg" alt=" " class="img-responsive"/>
                    <div class="mask">
                        <h4>Grocery Store</h4>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                    </div>
                </div>
                <h4>Utensils</h4>
                <ol>
                    <li>sunt in culpa qui officia</li>
                    <li>commodo consequat</li>
                    <li>sed do eiusmod tempor incididunt</li>
                </ol>
            </div>
            <div class="col-md-4 w3l_banner_nav_right_banner3_btml">
                <div class="view view-tenth">
                    <img src="images/14.jpg" alt=" " class="img-responsive"/>
                    <div class="mask">
                        <h4>Grocery Store</h4>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                    </div>
                </div>
                <h4>Hair Care</h4>
                <ol>
                    <li>enim ipsam voluptatem officia</li>
                    <li>tempora incidunt ut labore et</li>
                    <li>vel eum iure reprehenderit</li>
                </ol>
            </div>
            <div class="col-md-4 w3l_banner_nav_right_banner3_btml">
                <div class="view view-tenth">
                    <img src="images/15.jpg" alt=" " class="img-responsive"/>
                    <div class="mask">
                        <h4>Grocery Store</h4>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                    </div>
                </div>
                <h4>Cookies</h4>
                <ol>
                    <li>dolorem eum fugiat voluptas</li>
                    <li>ut aliquid ex ea commodi</li>
                    <li>magnam aliquam quaerat</li>
                </ol>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="w3ls_w3l_banner_nav_right_grid">
            <h3>Popular Brands</h3>
<!--            <div class="w3ls_w3l_banner_nav_right_grid1">-->
<!--                <h6>food</h6>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/5.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>knorr instant soup (100 gm)</p>-->
<!--                                            <h4>$3.00 <span>$5.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="5"-->
<!--                                                    data-name="Knorr instant soup" data-summary="summary 5"-->
<!--                                                    data-price="3.00" data-quantity="1" data-image="images/5.png">Add to-->
<!--                                                Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/6.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>chings noodles (75 gm)</p>-->
<!--                                            <h4>$5.00 <span>$8.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="6"-->
<!--                                                    data-name="Chings noodles" data-summary="summary 6"-->
<!--                                                    data-price="5.00" data-quantity="1" data-image="images/6.png">Add to-->
<!--                                                Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/7.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>lahsun sev (150 gm)</p>-->
<!--                                            <h4>$3.00 <span>$5.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="7"-->
<!--                                                    data-name="Haldiram lahsun sev" data-summary="summary 7"-->
<!--                                                    data-price="3.00" data-quantity="1" data-image="images/7.png">Add to-->
<!--                                                Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/8.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>premium bake rusk (300 gm)</p>-->
<!--                                            <h4>$5.00 <span>$7.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="8"-->
<!--                                                    data-name="Premium bake rusk" data-summary="summary 8"-->
<!--                                                    data-price="5.00" data-quantity="1" data-image="images/8.png">Add to-->
<!--                                                Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="clearfix"></div>-->
<!--            </div>-->
<!--            <div class="w3ls_w3l_banner_nav_right_grid1">-->
<!--                <h6>vegetables & fruits</h6>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/9.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>fresh spinach (palak)</p>-->
<!--                                            <h4>$2.00 <span>$3.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="9"-->
<!--                                                    data-name="Fresh spinach" data-summary="summary 9" data-price="2.00"-->
<!--                                                    data-quantity="1" data-image="images/9.png">Add to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/10.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>fresh mango dasheri (1 kg)</p>-->
<!--                                            <h4>$5.00 <span>$8.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="10"-->
<!--                                                    data-name="Fresh mango dasheri" data-summary="summary 10"-->
<!--                                                    data-price="5.00" data-quantity="1" data-image="images/10.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="tag"><img src="images/tag.png" alt=" " class="img-responsive"/></div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/11.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>fresh apple red (1 kg)</p>-->
<!--                                            <h4>$6.00 <span>$8.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="11"-->
<!--                                                    data-name="Fresh apple red" data-summary="summary 11"-->
<!--                                                    data-price="6.00" data-quantity="1" data-image="images/11.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/12.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>fresh broccoli (500 gm)</p>-->
<!--                                            <h4>$4.00 <span>$6.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="12"-->
<!--                                                    data-name="Fresh basket broccoli" data-summary="summary 12"-->
<!--                                                    data-price="4.00" data-quantity="1" data-image="images/12.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="clearfix"></div>-->
<!--            </div>-->
<!--            <div class="w3ls_w3l_banner_nav_right_grid1">-->
<!--                <h6>beverages</h6>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/13.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>mixed fruit juice (1 ltr)</p>-->
<!--                                            <h4>$3.00 <span>$4.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="13"-->
<!--                                                    data-name="Mixed fruit juice" data-summary="summary 13"-->
<!--                                                    data-price="3.00" data-quantity="1" data-image="images/13.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/14.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>prune juice - sunsweet (1 ltr)</p>-->
<!--                                            <h4>$4.00 <span>$5.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="14"-->
<!--                                                    data-name="Prune juice - sunsweet" data-summary="summary 14"-->
<!--                                                    data-price="4.00" data-quantity="1" data-image="images/14.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="tag"><img src="images/tag.png" alt=" " class="img-responsive"/></div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/15.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>coco cola zero can (330 ml)</p>-->
<!--                                            <h4>$3.00 <span>$5.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="15"-->
<!--                                                    data-name="Coco cola zero can" data-summary="summary 15"-->
<!--                                                    data-price="3.00" data-quantity="1" data-image="images/15.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-md-3 w3ls_w3l_banner_left">-->
<!--                    <div class="hover14 column">-->
<!--                        <div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">-->
<!--                            <div class="agile_top_brand_left_grid_pos">-->
<!--                                <img src="images/offer.png" alt=" " class="img-responsive"/>-->
<!--                            </div>-->
<!--                            <div class="agile_top_brand_left_grid1">-->
<!--                                <figure>-->
<!--                                    <div class="snipcart-item block">-->
<!--                                        <div class="snipcart-thumb">-->
<!--                                            <a href="product.html"><img src="images/16.png" alt=" "-->
<!--                                                                       class="img-responsive"/></a>-->
<!--                                            <p>sprite bottle (2 ltr)</p>-->
<!--                                            <h4>$3.00 <span>$4.00</span></h4>-->
<!--                                        </div>-->
<!--                                        <div class="snipcart-details">-->
<!--                                            <button class="btn btn-danger my-cart-btn hvr-sweep-to-right" data-id="16"-->
<!--                                                    data-name="Sprite bottle" data-summary="summary 16"-->
<!--                                                    data-price="3.00" data-quantity="1" data-image="images/16.png">Add-->
<!--                                                to Cart-->
<!--                                            </button>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="clearfix"></div>-->
<!--            </div>-->
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!-- //banner -->
<!-- newsletter -->
<div class="newsletter">
    <div class="container">
        <div class="w3agile_newsletter_left">
            <h3>sign up for our newsletter</h3>
        </div>
        <div class="w3agile_newsletter_right">
            <form action="#" method="post">
                <input type="email" name="Email" value="Email" onfocus="this.value = '';"
                       onblur="if (this.value == '') {this.value = 'Email';}" required="">
                <input type="submit" value="subscribe now">
            </form>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- //newsletter -->

<!-- footer -->
<div class="footer">
    <div class="container">
        <div class="col-md-3 w3_footer_grid">
            <h3>information</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="events.html">Events</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="list.html">Best Deals</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="short-codes.html">Short Codes</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>policy info</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="faqs.html">FAQ</a></li>
                <li><a href="privacy.html">privacy policy</a></li>
                <li><a href="privacy.html">terms of use</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>what in stores</h3>
            <ul class="w3_footer_grid_list">
                <li><a href="pet.html">Pet Food</a></li>
                <li><a href="frozen.html">Frozen Snacks</a></li>
                <li><a href="kitchen.html">Kitchen</a></li>
                <li><a href="list.html">Branded Foods</a></li>
                <li><a href="household.html">Households</a></li>
            </ul>
        </div>
        <div class="col-md-3 w3_footer_grid">
            <h3>twitter posts</h3>
            <ul class="w3_footer_grid_list1">
                <li><label class="fa fa-twitter" aria-hidden="true"></label><i>01 day ago</i><span>Non numquam <a
                        href="#">http://sd.ds/13jklf#</a>
						eius modi tempora incidunt ut labore et
						<a href="#">http://sd.ds/1389kjklf#</a>quo nulla.</span></li>
                <li><label class="fa fa-twitter" aria-hidden="true"></label><i>02 day ago</i><span>Con numquam <a
                        href="#">http://fd.uf/56hfg#</a>
						eius modi tempora incidunt ut labore et
						<a href="#">http://fd.uf/56hfg#</a>quo nulla.</span></li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div class="agile_footer_grids">
            <div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
                <div class="w3_footer_grid_bottom">
                    <h4>100% secure payments</h4>
                    <img src="images/card.png" alt=" " class="img-responsive"/>
                </div>
            </div>
            <div class="col-md-3 w3_footer_grid agile_footer_grids_w3_footer">
                <div class="w3_footer_grid_bottom">
                    <h5>connect with us</h5>
                    <ul class="agileits_social_icons">
                        <li><a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                        <li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                        <li><a href="#" class="google"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
                        <li><a href="#" class="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                        <li><a href="#" class="dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="wthree_footer_copy">
            <p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="https://www.downdemo.com"
                                                                                        target="_blank"
                                                                                        title="网站模板">网站模板</a> -
                Collect from <a href="https://www.downdemo.com" title="网页模板" target="_blank">网页模板</a></p>
        </div>
    </div>
</div>
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
</script>
<script type="text/javascript" id="snipcart" src="js/snipcart.js"
        data-api-key="ZGQxNzVjZTItOWRmNS00YjJhLTlmNGUtMDE4NjdiY2RmZGNj"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
            };
        */

        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<!-- //here ends scrolling icon -->
<script type='text/javascript' src="js/jquery.mycart.js"></script>
<script type="text/javascript">


</script>

<script type="text/html" id="productitem">
	<div class="col-md-3 w3ls_w3l_banner_left">
		<div class="hover14 column">
			<div class="agile_top_brand_left_grid w3l_agile_top_brand_left_grid">
				<!-- 商品图片和标签 -->
				<div class="agile_top_brand_left_grid_pos">
					<img src="images/offer.png" alt=" " class="img-responsive"/>
				</div>
				<!-- 商品详情 -->
				<div class="agile_top_brand_left_grid1">
					<a href="#"/>
					<figure>
						<div class="snipcart-item block">
							<!-- 商品图片 -->
							<div class="snipcart-thumb">
								<a href="product.html"><img src="images/5.png" alt=" " class="img-responsive"/></a>
								<p>商品名称</p>
								<h4>现价 <span>原价</span> </h4>
							</div>
							<!-- 添加到购物车按钮 -->
							<div class="snipcart-details">
								<button class="btn btn-danger my-cart-btn hvr-sweep-to-right"
										data-id="商品ID"
										data-name="商品名称"
										data-summary="商品摘要"
										data-price="商品价格"
										data-quantity="1"
										data-image="商品图片路径">
									Add to Cart
								</button>
							</div>
						</div>
					</figure>
				</div>
			</div>
		</div>
	</div>
</script>
<script src="layui/layui.all.js"></script>
<script th:inline="javascript">
	const $ = layui.$;
	const categoryid = /*[[${categoryid}]]*/;
	const keywords = /*[[${keywords}]]*/;
	var data = {};

	if (categoryid) {
		data.categoryid = categoryid;
	}
	if (keywords) {
		data.name = keywords;
	}

    $.ajax({
        url: 'product/list',
        data: data,
        success: function (result) {
            console.log(result); // 调试：检查返回的数据
            let container = $('.w3ls_w3l_banner_nav_right_grid1');
            container.empty();
            let data = result.data;
            for (let i = 0; i < data.length; i++) {
                let itemdata = data[i];
                let itemtext = $("#productitem").text();
                let $item=$(itemtext);
                $item.find('.snipcart-thumb a').attr('href', 'shopping/product?id='+itemdata.id);
                $item.find('.snipcart-thumb img').attr('src', itemdata.image);
                $item.find('.snipcart-thumb p').text(itemdata.name);
                $item.find('.snipcart-thumb h4').text(itemdata.price);
                $item.find('.snipcart-thumb h4 span').text(itemdata.oldprice);
                $item.find('.snipcart-details button').attr('data-id', itemdata.id);
                $item.find('.snipcart-details button').attr('data-name', itemdata.name);
                $item.find('.snipcart-details button').attr('data-price', itemdata.price);
                $item.find('.snipcart-details button').attr('data-image', itemdata.image);
                $(".w3ls_w3l_banner_nav_right_grid").append($item);
            }

            $(".my-cart-btn").click(function(){
                let productid = $(this).attr('data-id');
                $.ajax({
                    url:"cart/add",
                    data:{productid:productid},
                    success:function(result){
                        if(result.code==401){
                            layer.msg(result.msg,{icon:2});
                            setTimeout(function(){
                                location.href="shopping/login";
                            },2000);
                        }else{
                            layer.msg("已加入购物车",{icon: 1,time:1800});
                        }

                    }
                })

            });
        },
        error: function (xhr, status, error) {
            console.error('请求失败:', error);
        }

    });

</script>
</body>
</html>